<template>
  <el-dialog title="门店支付参数管理" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <div class="btn-area">
      <div>
        <el-button icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </div>
      <div>
        <el-select v-model="wechatId">
            <el-option v-for="item in wxAccounts" :key="item.id" :value="item.id" :label="item.name"></el-option>

          <!-- <el-option value="1" label="金华眼科医院"></el-option> -->
        </el-select>
        <el-button type="primary" style="margin-left: 15px;" @click="configuration">统一配置</el-button>
      </div>
    </div>

    <div class="content-list">
      <el-table :data="tableData" border stripe style="width: 100%" height="calc(100vh - 200px)" v-loading="dataListLoading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
      	<el-table-column prop="deptName" label="门店" header-align="center" align="center" width="180"></el-table-column>
      	<!-- <el-table-column prop="status" label="状态" header-align="center" align="center" min-width="180"></el-table-column> -->
      	<el-table-column prop="wechatId" label="微信公众号" header-align="center" align="center" min-width="180"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button @click="addOrUpdateHandle(scope.row.id)" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="paging-area">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalPage">
      </el-pagination>
    </div>

    <pay-form v-if="payVisible" ref="payDialog" @refreshDataList="searchHandle"></pay-form>
  </el-dialog>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { getDeptInfoByDeptType } from '@/api/admin/dept'

  import { fetchWxDeptLinkList } from '@/api/mp/wxdeptlink'
  import { fetchAccountList } from '@/api/mp/wxaccount'

  import PayForm from './PayForm'
  export default {
    data(){
      return {
        visible: false,
        payVisible: false,
        wechatId: '',
        wxAccounts: [],
        tableData: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0
      }
    },
    components:{
      PayForm
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods:{
      init(){
        this.visible = true
        this.getWxAccountList()
        this.searchHandle()
      },
      // 新增
      addOrUpdateHandle(id){
        this.payVisible = true
        this.$nextTick(() => {
          this.$refs.payDialog.init(id)
        })
      },
			handleSelectionChange(avl){

			},
      // 统一配置
      configuration(){

      },
      searchHandle(){
        this.pageIndex = 1
        this.getDeptList()
      },
      // 获取部门信息
      getDeptList(){
        this.dataListLoading = true
        fetchWxDeptLinkList({ current: this.pageIndex, size: this.pageSize }).then(response => {
          this.dataListLoading = false
          this.tableData = response.data.data.records
          this.totalPage = response.data.data.total
        }).catch(() => {
          this.dataListLoading = false
        })
      },
      // 获取公众号列表
      getWxAccountList(){
        fetchAccountList().then(result => {
          this.wxAccounts = result.data.data
        })
      },
      handleSizeChange(val){
        this.pageSize = val
        this.pageIndex = 1
        this.getDeptList()
      },
      handleCurrentChange(val){
        this.pageIndex = val
        this.getDeptList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn-area {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
  }
  .content-list {
    height: calc(100vh - 200px);
    overflow-y: auto;
    margin-bottom: 10px;
  }
  .paging-area {
    padding: 10px;
  }
</style>
